<template lang="html">
  <el-row>
    <el-col :xs="24" :sm={span:12,offset:6} :md={span:8,offset:8}>
      <div class="login" style="min-width: 330px">
        <el-row slot="body" :gutter="0">

          <div class="login-form">
            <div class="card-block">
              <h1 style="text-align: center;margin-bottom: 35px">速易联后台管理</h1>
              <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm">
                <el-form-item prop="username">
                  <el-input type="text" placeholder="用户名" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" placeholder="密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                  <el-row>
                    <el-col :span="10">
                      <el-input type="text" placeholder="验证码" v-model="form.captcha" @keyup.enter="login('form')"></el-input>
                    </el-col>
                    <el-col :span="14">
                      <a @click="refreshCode" style="cursor: pointer;padding-left: 10px">
                        <img style="height: 40px;width: 90%" title="如果看不清楚，请单击图片刷新！" class="pointer" v-bind:src="src"
                             @click="refreshCode"/>
                      </a>
                    </el-col>
                  </el-row>
                </el-form-item>
                <div class="row">
                  <el-row>
                    <el-col :span="12">
                      <el-button type="primary" class="btn btn-primary p-x-2" @click="login('form')">登录</el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="button" class="btn btn-link forgot" style="float:right;">忘记密码?</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </div>
          </div>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import types from '../store/mutation-types'
  import * as api from "../api"
  import auth from '../common/auth'
  import * as sysApi from '../services/sys'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import ElFormItem from "element-ui/packages/form/src/form-item";

  export default {
    name: 'login',
    data() {
      var validateCaptcha = (rule, value, callback) => {
        sysApi.capt({captcha:this.form.captcha}).then(res=>{
          if(res.code!=0)
           return callback(new Error('验证码错误'));
          else
            callback();
        });
      };
      return {
        form: {
          username: '',
          password: '',
          captcha: ''
        },
        src: api.CONTEXT + '/captcha.jpg',
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            { validator: validateCaptcha, trigger: 'blur' }
          ]
        }
      };
    },
    components: {ElFormItem},
    methods: {
      ...mapMutations({
        setUserInfo: types.SET_USER_INFO
      }),
      ...mapActions({
        loadMenuList: 'loadMenuList' // 映射 this.load() 为 this.$store.dispatch('loadMenuList')
      }),
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var redirectUrl = '/index';
            sysApi.login(this.form).then(res => {
              if(res.code==0)
                this.loginSuccess({...res,redirectUrl})
              else
                this.$message.error(res.msg);
            });
          }
            return false;
        });
      },
      loginSuccess({token, user, redirectUrl}) {
        debugger
        auth.login(token);
        window.sessionStorage.setItem("user-info", JSON.stringify(user));
        this.setUserInfo(user);
        this.$http.defaults.headers.common['token'] = token;
        this.loadMenuList();
        redirectUrl && this.$router.push({path: redirectUrl});
      },
      refreshCode() {
        this.src = api.CONTEXT + '/captcha.jpg?t=' + new Date().getTime();
      }
    }
  }
</script>

<style>
  .login {
    margin-top: 160px;
    width: 100%;
    border: 1px solid #cfd8dc;
    margin-right: auto !important;
    margin-left: auto !important;
    display: table;
    table-layout: fixed;
    background-color: #20a8d8;
  }

  .login .login-form {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    display: block;

  }

  .login .login-form .card-block {
    padding: 35px;
  }

  .login .login-form .card-block p {
    margin: 15px 0;
  }

  .btn-link:focus, .btn-link:hover {
    color: #167495;
    text-decoration: underline;
    background-color: transparent;
  }

  .btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent;
  }

  .btn.focus, .btn:focus, .btn:hover {
    text-decoration: none;
  }

  .login .login-form .card-block .row {
    display: block;
    margin: 15px 0;
  }

  .login .login-register .card-block {
    text-align: center !important;
    padding: 30px;
  }

  .login .login-register .card-block p {
    text-align: left !important;
    margin: 15px 0;
    height: 100px;
  }
</style>
